/**
 * 树类目拖动编辑管理
 */
layui.define(["jquery"],function(exports){
    
    
    
    
    // 
    var dragtree = {        
        render: function (e){
            console.log('11');
            $.extend(sys,e);
            drag.init();
        }
    }
    
    //拖拽类
    var drag = {    
    	permitDrag : false,	//是否允许移动标识    
        //被点击 拖拽对象的原始位置 xy 表示 对象的XY坐标 left top 表示光标与XY坐标的距离
        oldLocal : {x : 0 , y : 0 , left : 0 , top : 0,maindown : 0 },  
    
        old_elm : null,     //拖拽原节点
        tmp_elm : null,     //跟随光标移动的临时节点
         
        //初始化
        init : function (){  
            $(sys.dragmain).on('mousedown', sys.dragli, function(event){
                drag.permitDrag = true;  //监听点击实际 并标识为可拖拽                
                drag.old_elm = $(this); //获取到拖拽的原节点对象                
                drag.mousedown(event);  //执行开始拖拽的操作
                return false;
            });
    
            //监听鼠标移动
            $(document).mousemove(function(event){                
                if(!drag.permitDrag) return false; //判断拖拽标识是否为允许，否则不进行操作                
                drag.mousemove(event); //执行移动的操作
                return false;
            });
    
            //监听鼠标放开
            $(document).mouseup(function(event){                
                if(!drag.permitDrag) return false; //判断拖拽标识是否为允许，否则不进行操作                
                drag.permitDrag = false; //拖拽结束后恢复标识到初始状态                
                drag.mouseup(event); //执行拖拽结束后的操作
                return false;
            });
        },
        // 被拖拽点击事件
        mousedown : function (event){
            console.log('我被mousedown了');
            //1.克隆临时节点，跟随鼠标进行移动
            drag.tmp_elm = $(drag.old_elm).clone();
            //drag.tmp_elm.addClass('JSe-drag-li'); 
            var e = event || window.event;
            //2.计算节点 和 光标的坐标
            drag.oldLocal.x =  $(drag.old_elm).offset().left;
            drag.oldLocal.y =  $(drag.old_elm).offset().top;
            drag.oldLocal.left = e.pageX - drag.oldLocal.x;
            drag.oldLocal.top  = e.pageY - drag.oldLocal.y;    
            drag.oldLocal.maindown = $(sys.dragmain).height() + $(sys.dragmain).offset().top - 20;
            //初始化被拖拽节点的状态
            $(drag.tmp_elm).css({
                'width'    : $(drag.old_elm).width(),
                'height'   : $(drag.old_elm).height(),
                'left'     : drag.oldLocal.x,
                'top'      : drag.oldLocal.y,                
                'background-color': '#FFF',
                'position' : 'absolute',                
                'cursor'   : 'move',
                '-moz-box-shadow':'0px 5px 13px #333333',
                '-webkit-box-shadow':'0px 5px 13px #333333', 
                'box-shadow':'0px 5px 13px #333333',
            });   
            $(drag.tmp_elm).find('td').css({
                'position'  : 'relative',
                'padding'   : '9px 15px',
                'width': '1%'
            });
            //把被拖动的节点添加到页面中
            tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
            drag.tmp_elm = $(tmp).find(drag.tmp_elm);
            //删除被拖拽的节点 
            // TODO 删除下级节点
            //$(drag.old_elm).before('<tr class="JSe-drag-preShow JSe-first"><td  colspan="9" ><span>click</span></td></tr>');
            drag.addPreShowHtml($(drag.old_elm),'before','JSe-first');
            $(drag.old_elm).hide();
        },
        //移动鼠标 执行的操作
    	mousemove : function (event){    	    
    		//console.log('我被mousemove了');
            //2.计算坐标
            var e = event || window.event;
            var x = e.pageX - drag.oldLocal.left;
            var y = e.pageY - drag.oldLocal.top;            
            var maxL = $(document).width() - $(drag.old_elm).outerWidth();
            var maxT = $(document).height() - $(drag.old_elm).outerHeight();
            //不允许超出浏览器范围            
            x = x < 0 ? 0: x;
            x = x > maxL ? maxL: x;
            y = y < 0 ? 0: y;
            y = y > maxT ? maxT: y;            
            //修改拖动节点的坐标
            $(drag.tmp_elm).css({
                'left' : x,
                'top' : y,
            });
            if( Math.abs(y - drag.oldLocal.y ) < 4 ) return false; // 小移动不处理
            
            //判断当前容器是否允许放置节点
            $.each($(sys.dragmain +' '+sys.dragli+':visible').not('.JSe-drag-preShow'), function(index, value){ 
               // if( $(value).hasClass('JSe-drag-preShow') ) return;
              //  console.log(index);
                var isPreShow = $(value).next().hasClass('JSe-drag-preShow');
                
                var hight = isPreShow ? $(value).outerHeight()*0.8 : 0;
                
                var box = {
                    left  : $(value).offset().left - 50, // 增大左边移动范围
                    top   : $(value).offset().top,
                    right : $(value).offset().left + $(value).outerWidth(),
                    bottom  : $(value).offset().top + $(value).outerHeight() + hight
                }               
                                
                var isPreShowTop = !!$(sys.dragmain+ ' .JSe-drag-preshowtop').length; // 顶部预显示
                if( index == 0 && box.left < x && x < box.right && y < box.top ){
                    var fisrtShowTop = $(value).prevAll().hasClass('JSe-first');
                    if( !isPreShowTop && !fisrtShowTop ){
                        drag.addPreShowHtml($(value),'before','JSe-drag-preshowtop');
                       // $(value).before('<tr class="JSe-drag-preShow JSe-drag-preshowtop" ><td  colspan="9" ><span>top</span></td></tr>');
                    }
                    isPreShowTop = true;
                }
                if( x > box.left && x < box.right && y > box.top && y < box.bottom ){
                    if( ! isPreShow ){
                        drag.addPreShowHtml($(value),'after');
                        //$(value).after('<tr class="JSe-drag-preShow" ><td  colspan="9" ><span>ok</span></td></tr>');
                    }
                    if(isPreShowTop) $(sys.dragmain+ ' .JSe-drag-preshowtop').remove(); 
                    $(sys.dragmain+ ' .JSe-first').remove(); 
                }else{
                    if( isPreShow && y < drag.oldLocal.maindown ) $(value).next().remove();
                }                
            });     
            //$(sys.dragmain+ ' .JSe-first').remove();
    	},
        
        //放开鼠标 执行的操作
        mouseup : function (event){ 
            var hasShowPoint = $(sys.dragmain+' .JSe-drag-preShow').length;
            $(drag.old_elm).show();
            if( hasShowPoint == 1 ){                
                $(sys.dragmain+' .JSe-drag-preShow').after(drag.old_elm); 
            }
            $(sys.dragmain+' .JSe-drag-preShow').remove();
            $(drag.tmp_elm).remove();
        },
        //添加占位节点
        addPreShowHtml:function(e,call,css,left){
            left = left ? left: 0;
            css  = css ? css : '';
            var html = '<tr class="JSe-drag-preShow '+css+'" ><td  colspan="9" ><span>1'+css+'</span></td></tr>';
            var dragHeight = e.height();
            var dragWidth  = e.width();
            if( call == 'after'){
                e.after(html);     
            }else{
                e.before(html);
            }
            $(sys.dragmain).find('.JSe-drag-preShow').css({
                'height': dragHeight,
                'width' : dragWidth 
            });
            $(sys.dragmain).find('.JSe-drag-preShow td').css({
                'padding': '0px',
                'height': dragHeight-2
            });
            $(sys.dragmain).find('.JSe-drag-preShow span').css({
                'margin-left': left,
                'width': dragWidth-left-3,
                'background': '#E6FFFF',
                'height':  dragHeight-2,                
                'display': 'inline-block',
                'border': 'dashed',
                'border-width': '1px',
                'border-color': 'palegreen'
            });
        }
    }
    
    
    
    var sys = {
        url : '', // 请求数据的接口
        saveurl : '', // 编辑数据的接口 编辑类型 [ add 、del 、edit 、save ] 其中save 针对所有数据
        dragmain: '#JS_drag_table', // 需要拖动编辑的容器
        dragli  : 'tr',             // 具体被拖动的列表
    }
    
    
    exports('dragtree', dragtree);
    
    
    
});